import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import SettingStyle from '@/page/setting/setting.scss';
import SettingLayout from '@/component/setting/Layout';
import UserStore from '@/store/User';
import AlStore from '@/store/Alliance';
import format from '@/tool/format';

@observer class ModifyPswSuccess extends Component {
    state = {
        timer: 3
    };
    static propTypes = {
        onReset: PropTypes.func.isRequired
    };
    componentDidMount() {
        this._isMounted = true;
        this.handleTimer();
    }

    handleTimer = () => {
        this.timer = setInterval(() => {
            let seconds = this.state.timer;
            seconds = seconds - 1;
            if (seconds <= 0) {
                clearInterval(this.timer);
                this.props.onReset();
            }
            if (!this._isMounted) return;
            this.setState({
                timer: seconds
            })
        }, 1000)
    };
    componentWillUnmount() {
        this._isMounted = false;
        clearInterval(this.timer);
    }

    render() {
        return (
            <SettingLayout>
                <div className={SettingStyle['finish-wrap']}>
                    <table border="0" className={SettingStyle['login-info']}>
                        <thead />
                        <tbody>
                            <tr>
                                <td className={SettingStyle['login-account']}>登录账号:</td>
                                <td className={SettingStyle['login-account']}>{UserStore.info.account_name}  {AlStore.info.verify == 1 && <span>(<span style={{ color: "#FFC758" }}>您已经通过实名认证</span>)</span>}</td>
                            </tr>
                            <tr>
                                <td className={SettingStyle['login-account']}>注册时间:</td>
                                <td className={SettingStyle['login-account']}>{format.timeString(UserStore.info.reg_time)}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div className={SettingStyle['step3']} />
                    <hr className={SettingStyle['security-line']} />
                    <div className={SettingStyle['success']}>修改成功，<span>{this.state.timer}</span>秒后跳转</div>
                </div>
            </SettingLayout>
        );
    }
}

export default ModifyPswSuccess;